import React from 'react';
import { reduxForm } from 'redux-form';
import {  subscribe } from 'horizon-react';
import { createDoc } from 'horizon-react/lib/utils';
import Form from './form';

import styles from './styles';

const AddTodoButton = (props) => {
  const collection = props.horizon('todos');
  const addTodo = (t) => createDoc(collection, { text: t });

  let onKeyDown  = function(e) {
    if (e.key === 'Enter') {
      addTodo(e.target.value);
      e.target.value = '';
    }
  };

  let onAdd = function() {
     addTodo(document.getElementById('todo-text').value);
    document.getElementById('todo-text').value = '';
  };

  return (
    <div className={styles.fl}>
      <input
         id="todo-text"
         className={styles.inputwarp}
         type="text"
         placeholder="new tag?"
         onKeyPress={e => { onKeyDown(e) } }
      />
        {
            /*
             <div
                  className={styles.button}
                  onClick={() => { onAdd() }}
                 >
                 + Add todo
               </div>
             */
        }
    </div>
  );
};


export default subscribe()(AddTodoButton);
